<template>
  <page>
    <div slot="content">
      <div class="flex flex-wrap">
        <div class="mr-20 mb-5">
          <a-input @keydown.enter="fetchData" v-model="screening.paperId" placeholder="论文ID" class="max-w-200"></a-input>
        </div>
        <div class="mr-20 mb-5">
          <a-input @keydown.enter="fetchData" v-model="screening.userId" placeholder="用户ID" class="max-w-200"></a-input>
        </div>
        <a-select
          v-model="screening.reviewState"
          style="min-width: 150px; margin-right: 20px"
          placeholder="论文状态"
          @change="fetchData"
        >
          <a-select-option :value="0">待审核</a-select-option>
          <a-select-option :value="1">审核通过</a-select-option>
          <a-select-option :value="2">审核不通过</a-select-option>
          <a-select-option :value="3">作者删除</a-select-option>
          <a-select-option :value="4">管理员删除</a-select-option>
          <a-select-option :value="5">隐藏</a-select-option>
        </a-select>
        <a-button icon="search" @click="fetchData">查找</a-button>
      </div>
      <a-table
        :dataSource="list"
        :columns="columns"
        :loading="loading"
        rowKey="id"
        @change="pageChange"
        :pagination="pagination"
      >
        <template slot="action" slot-scope="text, row">
          <a-button type="primary" ghost @click="openAuditModal(row.id, text)">审核</a-button>
        </template>
      </a-table>
      <a-modal
        title="评论审核"
        v-model="showAuditModal"
        @ok="auditComment"
        @cancel="showAuditModal = false"
        :centered="true"
      >
        <a-textarea placeholder="审核意见" v-model="auditModel.reason" :rows="5"></a-textarea>
        <a-radio-group style="margin-top: 10px" v-model="auditModel.actionType">
          <a-radio :value="0">通过</a-radio>
          <a-radio :value="1">不通过</a-radio>
          <a-radio :value="2">显示</a-radio>
          <a-radio :value="3">隐藏</a-radio>
          <a-radio :value="4">删除</a-radio>
        </a-radio-group>
      </a-modal>
    </div>
  </page>
</template>

<script>
  const columns = [
    {
      dataIndex: 'id',
      title: 'ID',
      align: 'center'
    },
    {
      dataIndex: 'content',
      title: '评论内容',
      align: 'center'
    },
    {
      dataIndex: 'userId',
      title: '用户ID',
      align: 'center'
    },
    {
      dataIndex: 'username',
      title: '用户名',
      align: 'center'
    },
    {
      dataIndex: 'createTime',
      title: '提交时间',
      align: 'center'
    },
    {
      dataIndex: 'reviewState',
      title: '操作',
      scopedSlots: { customRender: 'action' }
    }
  ]
  const pagination = {
    current: 1,
    pageSize: 10,
    total: 0,
    showTotal: total => `共${total}条数据`,
    pageSizeOptions: ['10', '20', '30', '50', '100']
  }
  export default {
    name: "comment-manage",
    data () {
      return {
        columns,
        pagination,
        screening: {
          paperId: '',
          userId: '',
          reviewState: 0
        },
        loading: false,
        list: [],
        showAuditModal: false,
        auditModel: {
          commentId: '',
          reason: '',
          actionType: 0
        }
      }
    },
    mounted () {
      this.fetchData()
    },
    methods: {
      fetchData () {
        this.loading = true
        let params = {
          currentPage: this.pagination.current,
          pageSize: this.pagination.pageSize,
          ...this.screening
        }
        this.$api.paper.getCommentList(params).then(res => {
          if (res?.code === 0) {
            this.list = res.data.records
            this.pagination.total = res.data.total
          } else {
            this.$message.error(res.userMsg)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      pageChange (pagination) {
        this.pagination = pagination
        this.fetchData()
      },
      openAuditModal (id, reviewState) {
        this.auditModel.commentId = id.toString()
        this.auditModel.actionType = reviewState
        this.showAuditModal = true
      },
      auditComment () {
        this.showAuditModal = false
        let params = {
          ...this.auditModel
        }
        this.$api.paper.auditComment(params).then(res => {
          if (res?.code === 0) {
            this.$message.success(res.userMsg)
            this.fetchData()
          } else {
            this.$message.error(res.userMsg)
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>